<template>

  <div>
      <el-button type="primary" icon="el-icon-back" @click="$router.back()" size="small">上一页</el-button>
    <div><br />
    </div>
    <div id="xlsxChart" style="width: 100%;height: 500%;"></div>

  </div>
</template>

<script>
  import echarts from "echarts";
  import XLSX from "xlsx";  //引入xlsx
  export default {
    data() {
      return {
        h:'',
      }
    },


    /* created() {
      this.getDetailsList()
    }, */


    /* 接收groupIdex传来的参数 */
    mounted(){
      this.h = this.$route.query.b
      this.updateChart()
    },

    methods:{
      //初始化echartInstance对象

      initChart(){
        this.myChart = echarts.init(document.getElementById('xlsxChart'));
      },
      //获取数据
      getData(){},
      //更新图表
      updateChart(){
        const km = this.h.colHeaders
        const sellerName = this.h.data.map((item) =>{
          return item.A
        })
        console.log("sellerName",sellerName)
        const sellerValue = this.h.data.map((item) =>{
          return item.B
        })
        const sellerValue1 = this.h.data.map((item) =>{
          return item.C
        })
        const sellerValue2 = this.h.data.map((item) =>{
          return item.D
        })
        const sellerValue3 = this.h.data.map((item) =>{
          return item.E
        })
        const sellerValue4 = this.h.data.map((item) =>{
          return item.F
        })
        const sellerValue5 = this.h.data.map((item) =>{
          return item.G
        })
        const sellerValue6= this.h.data.map((item) =>{
          return item.H
        })
        const sellerValue7 = this.h.data.map((item) =>{
          return item.I
        })
        const sellerValue8 = this.h.data.map((item) =>{
          return item.J
        })
        const sellerValue9 = this.h.data.map((item) =>{
          return item.K
        })
        const option = {
          title: {
            text: '饼形图',
            subtext: '仅支持一组数据',
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          legend: {
            orient: 'vertical',
            right: 'right',
            data: sellerName,
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: "bottom",
            feature: {
              saveAsImage: {show: true},
            }
          },
          series: [{
            name: km[1],

            data: [
              {value: sellerValue[0], name: sellerName[0],},
              {value: sellerValue[1], name: sellerName[1],},
              {value: sellerValue[2], name: sellerName[2],},
              {value: sellerValue[3], name: sellerName[3],},
              {value: sellerValue[4], name: sellerName[4],},
              {value: sellerValue[5], name: sellerName[5],},
              {value: sellerValue[6], name: sellerName[6],},
              {value: sellerValue[7], name: sellerName[7],},
              {value: sellerValue[8], name: sellerName[8],},
              {value: sellerValue[9], name: sellerName[9],},
              {value: sellerValue[10], name: sellerName[10],},
              {value: sellerValue[11], name: sellerName[11],},
              {value: sellerValue[12], name: sellerName[12],},
              {value: sellerValue[13], name: sellerName[13],},
              {value: sellerValue[14], name: sellerName[14],},
            ],
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              // data: [
              //   {value: 335, name: '直接访问'},
              //   {value: 310, name: '邮件营销'},
              //   {value: 234, name: '联盟广告'},
              //   {value: 135, name: '视频广告'},
              //   {value: 1548, name: '搜索引擎'}
              // ],
            }
          },
            // {
            //   name: km[2],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: [
            //     {value: sellerValue1[0], name: sellerName[0],},
            //     {value: sellerValue1[1], name: sellerName[1],},
            //     {value: sellerValue1[2], name: sellerName[2],},
            //     {value: sellerValue1[3], name: sellerName[3],},
            //     {value: sellerValue1[4], name: sellerName[4],},
            //     {value: sellerValue1[5], name: sellerName[5],},
            //     {value: sellerValue1[6], name: sellerName[6],},
            //     {value: sellerValue1[7], name: sellerName[7],},
            //     {value: sellerValue1[8], name: sellerName[8],},
            //     {value: sellerValue1[9], name: sellerName[9],},
            //     {value: sellerValue1[10], name: sellerName[10],},
            //     {value: sellerValue1[11], name: sellerName[11],},
            //     {value: sellerValue1[12], name: sellerName[12],},
            //     {value: sellerValue1[13], name: sellerName[13],},
            //   ],
            // },
            // {
            //   name: km[3],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue2
            // },
            // {
            //   name: km[4],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue3
            // },
            // {
            //   name: km[5],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue4
            // },
            // {
            //   name: km[6],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue5
            // },
            // {
            //   name: km[7],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue6
            // },
            // {
            //   name: km[8],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue7
            // },
            //
            // {
            //   name: km[9],
            //   type: 'pie',
            //   radius: '55%',
            //   center: ['50%', '60%'],
            //   emphasis: {
            //     itemStyle: {
            //       shadowBlur: 10,
            //       shadowOffsetX: 0,
            //       shadowColor: 'rgba(0, 0, 0, 0.5)'
            //     }
            //   },
            //   data: sellerValue8
            // }
          ]
        }
        let myChart = echarts.init(document.getElementById('xlsxChart'));
        myChart.setOption(option)
      },

    }

  }
</script>

<style>
  #main{

  }
</style>
